<script setup lang='ts'>
import bottomSec from '../../components/bottomSec.vue';

</script>

<template>
    <view class="page">
        <video class="video" src=""></video>
        <view class="fixed">
            <view class="fixed-top">
                <view class="fixed-top-item">
                    <text>304.5万</text>
                    <text class="fixed-item-text">播放量</text>
                </view>
                <view class="fixed-top-item">
                    <text>304.5万</text>
                    <text class="fixed-item-text">点赞量</text>
                </view>
                <view class="fixed-top-item">
                    <text>304.5万</text>
                    <text class="fixed-item-text">评论量</text>
                </view>
            </view>
            <view class="fixed-middle">
                <text>标题<text class="topic">#话题</text></text>
            </view>
            <view class="fixed-bottom">
                <button class="fxed-bottom-btn"><image class="fxed-bottom-img" src=""/>剪同款</button>
                <bottomSec />
            </view>
        </view>
    </view>
</template>

<style lang='scss' scoped>
    .page{
        background-color: #000;
        position: fixed;
        width: 100%;
        height: 100%;
        .video{
            display: block;
            width: 496rpx;
            height: calc(100% - 568rpx);
            margin: 0 auto;
        }
        .fixed{
            width: 100%;
            height: 568rpx;
            border-radius: 32rpx 32rpx 0 0;
            background-color: rgb(246,248,251);
            padding: 32rpx;

            .fixed-top{
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .fixed-top-item{
                    height: 96rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    color: rgb(69,70,74);
                    font-size: 32rpx;
                    font-weight: 500;
                    .fixed-item-text{
                        font-size: 28rpx;
                        color: rgb(144,147,153);
                        font-weight: normal;
                    }
                }
            }
            .fixed-middle{
                width: 100%;
                height: 210rpx;
                padding: 32rpx;
                background-color: #fff;
                border-radius: 16rpx;
                margin-top: 32rpx;
                margin-bottom: 42rpx;
                font-size: 28rpx;
                color: rgb(69,70,74);
                .topic{
                    color: rgb(144,147,153);
                }
            }
            .fixed-bottom{
                .fxed-bottom-btn{
                    width: 100%;
                    height: 88rpx;
                    background-color: rgb(255,205,39);
                    border-radius: 596rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 32rpx;
                    color: rgb(48,49,51);
                    font-weight: 500;
                    .fxed-bottom-img{
                        width: 36rpx;
                        height: 36rpx;
                        margin-right: 6rpx;
                    }
                }
            }
        }
    }
</style>